<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output omit-xml-declaration="yes" doctype-public="" doctype-system="" indent="yes"/>

    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
            <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
                <title>CSS Documentation</title>
                <link rel="stylesheet" media="all" href="styles/css_doc.css"/>
                <script type="text/javascript" src="scripts/mootools-core-1.4.1-full-compat.js">//</script>
                <script type="text/javascript" src="scripts/index.js">//</script>
            </head>
            <body onload="onLoadHandler()">
                <div id="canvas">
                    <ul class="navigation">
                        <li>
                            <a href="./index.html">Home</a>
                        </li>
                        <li>
                            <a href="./file_index.html">File Index</a>
                        </li>
                        <li>
                            <a href="./selector_index.html">Selector Index</a>
                        </li>
                        <li>
                            <a href="./section_index.html">Section Index</a>
                        </li>
                        <li>
                            <a href="./example_index.html">Example Index</a>
                        </li>
                    </ul>

                    <div class="content">
                        <xsl:call-template name="sections"/>
                    </div>

                    <p id="footer">
                        Footer.
                    </p>
                </div>
            </body>
        </html>
    </xsl:template>

    <xsl:template name="sections">
        <h2 class="header">
            <span class="title">Documentation</span>
             <input class="collapse-expand-button" type="button" value="Collapse all"/>
             <input class="collapse-expand-button" type="button" value="Expand all"/>
        </h2>

        <xsl:for-each select="//doc/section">
            <div class="section-container section-collapsed">
                <h3 class="section">
                    <xsl:attribute name="id">#section-<xsl:value-of select="@name"/>
                    </xsl:attribute>
                    <span class="title"><xsl:value-of select="@name"/></span>

                    <input class="collapse-expand-button" type="button" value="Collapse all"/>
                    <input class="collapse-expand-button" type="button" value="Expand all"/>
                </h3>

                <xsl:variable name="description_" select="description/comment"/>
                <xsl:if test="$description_!=''"><a class="description"><xsl:value-of select="$description_"/></a></xsl:if>

                <xsl:apply-templates select="rule|subsection"/>
            </div>
        </xsl:for-each>
    </xsl:template>

    <xsl:template match="rule">
        <div class="rule rule-collapsed">
            <h4 class="rule-set">
                <xsl:attribute name="id">#rule-set-<xsl:value-of select="position()"/>
                </xsl:attribute>
                <!--                    <span>
                    <xsl:for-each select="selector" >
                        <xsl:sort select="@value"/>

                        <xsl:value-of select="@value" /><xsl:if test="last() != position()">,</xsl:if>
                    </xsl:for-each>
                </span>-->
                <ul class="rule-list">
                    <xsl:for-each select="selector">
                        <xsl:sort select="@value"/>

                        <li>
                            <xsl:value-of select="@value"/>
                        </li>
                    </xsl:for-each>
                </ul>

                <xsl:variable name="count_" select="count(selector)"/>
                <span class="count"><xsl:if test="$count_ > 3">(<xsl:value-of select="$count_"/>)</xsl:if>&#160;</span>

                <span class="header-comment">
                    <xsl:value-of select="./description/comment"/>
                </span>
            </h4>


            <xsl:if test="property">
                <div class="expanded">
                    <xsl:variable name="comment_" select="./description/comment"/>
                    <xsl:if test="$comment_!=''">
                        <p class="comment">
                            <xsl:value-of select="$comment_"/>
                        </p>
                    </xsl:if>
                    <!--<xsl:call-template name="full-comment"/>-->
                    <xsl:if test="property">
                        <table class="properties">
                            <xsl:for-each select="property">
                                <tr>
                                    <td class="icon">
                                        <!--<xsl:attribute name="style">
                                            <xsl:choose>
                                                <xsl:when test="contains(@name, 'color')" >
                                                    background-color:
                                                    <xsl:value-of select="@value" />
                                                </xsl:when>
                                                <xsl:when test="@name = 'background'" >
                                                     background-color:
                                                    <xsl:value-of select="regexp:match(@value,'rgb\\(\\s*\\d+\\s*\\,\\s*\\d+\\s*\\,\\s*\\d+\\s*\\)')"/>
                                                </xsl:when>
                                            </xsl:choose>
                                         </xsl:attribute>-->
                                        &#160;</td>
                                    <td>
                                        <xsl:value-of select="@name"/>
                                    </td>
                                    <td>
                                        <xsl:value-of select="@value"/>
                                    </td>
                                </tr>
                            </xsl:for-each>
                        </table>
                    </xsl:if>
                </div>
            </xsl:if>
        </div>
    </xsl:template>

    <xsl:template match="subsection" >
        <div class="subsection" >
            <h4 class="subsection_title"><xsl:value-of select="@name"/></h4>
            <xsl:if test="comment != ''">
                <a class="comment"><xsl:value-of select="./comment"/></a>
            </xsl:if>

            <xsl:call-template name="full-comment" />
        </div>
    </xsl:template>

    <xsl:template name="full-comment">
        <xsl:variable name="tags" select="description/*[not(name()='comment')]" />
        <xsl:if test="count($tags) > 0">
            <dl class="tags">
                <xsl:for-each select="$tags">
                    <dt>
                        <xsl:value-of select="name()"/>
                    </dt>
                    <dd>
                        <xsl:value-of select="."/>
                    </dd>
                </xsl:for-each>
            </dl>
        </xsl:if>
    </xsl:template>

    <xsl:template name="short-comment">
        <p>
            <xsl:value-of select="substring(./description/comment, 0, 40)"/>
        </p>
    </xsl:template>

</xsl:stylesheet>